<template>
  <div class="home">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="(item, index) in classList"
        :key="index"
        :title="item.cat_name"
      />
    </van-sidebar>
    <ul v-if="classList.length">
      <li v-for="(item, index) in classList[activeKey].children" :key="index">
        <h4>{{ item.cat_name }}</h4>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(n, childIndex) in item.children"
            :key="childIndex"
            :icon="n.cat_icon"
            :text="n.cat_name"
            @click="jump(n)"
          />
        </van-grid>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      classList: [],
      activeKey: 0, // 选中侧边栏的索引值
      allList: [],
      jsonList: [],
    };
  },
  created() {
    this.$axios.get("feilei.json").then((res) => {
      this.classList = res.data.message;
      // console.log(this.classList);
      this.classList.forEach((item) => {
        // console.log(item.children);
        if (item.children.length) {
          item.children.forEach((n) => {
            // console.log(n);
            if (n.children) {
              // console.log(n);
              this.allList = [...this.allList, ...n.children];
            }
          });
        }
      });
      // console.log(this.allList);
      this.info();
    });
  },
  methods: {
    async info() {
      for (let i = 0, item; (item = this.allList[i++]); ) {
        // console.log(item);
        let res = await this.$axios.get(
          `https://api-hmugo-web.itheima.net/api/public/v1/goods/search?cid=${item.cat_id}`
        );
        this.jsonList = [...this.jsonList, ...res.data.message.goods];
      }
      // console.log(this.jsonList);
    },
    jump(val) {
      console.log(this.jsonList);
      console.log(val);
      // this.$router.push(`/about/${val.cat_id}`);
    },
  },
};
</script>
<style lang="scss">
.home {
  display: flex;
  height: 100vh;
  overflow: hidden;
  .van-sidebar-item--select::before {
    background-color: #fff;
  }
  .van-sidebar-item--select {
    color: red;
  }
}
ul {
  flex: 1;
  overflow: auto;
}
h4 {
  text-align: center;
  line-height: 40px;
}
</style>
